<template>
  <div>
    <ul>
      <li>
        <!-- 
          router-link声明式导航，它编译成html的标签为a,在vue-router3版本中可以自定义设置
          to: string|{path:string,query:{},params:{}}  目标地址
          tag: 默认编译生成的为a，可以自定义
          activeClass 指定激活样式名称，默认名称为：router-link-active
         -->
        <!-- <router-link to="/home" tag="h3">home</router-link> -->
        <!-- <router-link to="/home?id=100" activeClass="active">home</router-link> -->
        <router-link :to="{ path: '/home', query: { id: 100 } }" activeClass="active">home</router-link>
      </li>
      <li>
        <router-link to="/about" activeClass="active">about</router-link>
      </li>
      <li>
        <router-link to="/login" activeClass="active">login</router-link>
      </li>
    </ul>
    <hr />
    <!-- 定义路由匹配成功后渲染的挂载点 -->
    <router-view />
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.active {
  color: red;
}
</style>
